<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/math.min.js?v0"></script>
    <script src="js/jquery-3.2.1.min.js?v0"></script>
    <script src="js/caculate.js?v0"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css?v0"/>
    <title>商品定价计算</title>
</head>
<body>
<h4>毛利率->定价</h4>
<span style="margin-left: 80px">跳转到<a href="batchCal.html" target="_blank">批量计算</a></span>
<div>
    进价: <input id="costPrice" type="number">
    重量(KG): <input id="weight" type="number">
    数量: <input id="number" type="number">
    利润率: <input id="rate" type="number">
</div>
<br>
<button id="submit" style="">计算</button>
<br>
<br>
<div id="table">
    <table class="hovertable">
        <!--<caption>计算结果</caption>-->
        <thead>
        <tr>
            <th>国家名称</th>
            <th>地区/运输公司</th>
            <th>汇率</th>
            <th>币制</th>
            <th>进价</th>
            <th>成本</th>
            <th>总运费</th>
            <th>买家运费</th>
            <th>藏价</th>
            <th>平台费用</th>
            <th>定价</th>
            <th>利润</th>
            <th>利润率</th>
        </tr>
        </thead>
        <tbody id="body">
        </tbody>
    </table>
</div>
</body>

<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            let cost = $("#costPrice").val();
            let weight = $("#weight").val();
            let number = $("#number").val();
            let rate = $("#rate").val();
            //获取数据
            let data = dataJsonByOne(cost, weight , rate,number);
            //清空表格
            $("#body").html("");
            $.each(data,function () {
                appendPage(this)
            });
        });

        // ------------------------页面处理---------------------------
        //表格渲染
        var appendPage = function(data){
            let trString = "<tr class=\"data-row\">\n" +
                "            <td class=\"countryName\">"+data.countryName+"</td>\n" +
                "            <td class=\"position\">"+data.position+"</td>\n" +
                "            <td class=\"exchangeRate\">"+data.exchangeRate+"</td>\n" +
                "            <td class=\"currency\">"+data.currency+"</td>\n" +
                "            <td class=\"cost\">"+data.cost+"</td>\n" +
                "            <td class=\"costPrice\">"+data.costPrice+"</td>\n" +
                "            <td class=\"costPrice\">"+data.planFormFright+"</td>\n" +
                "            <td class=\"costPrice\">"+data.customerFright+"</td>\n" +
                "            <td class=\"hidePrice\">"+data.hidePrice+"</td>\n" +
                "            <td class=\"plantFee\">"+data.plantFee+"</td>\n" +
                "            <td class=\"sellPrice\">"+data.sellPrice+"</td>\n" +
                "            <td class=\"interest\">"+data.interest+"</td>\n" +
                "            <td class=\"interestRate\">"+data.interestRate+"</td>\n" +
                "        </tr>";
            $("#body").append(trString);
        };

        // 鼠标样式
        $(".hovertable tr").mouseover(function () {
            this.style.backgroundColor='#ffff66'
        });
        $(".hovertable tr").mouseout(function () {
            this.style.backgroundColor='#d4e3e5'
        });
    });
</script>
</html>